.demo-main {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	font-size: 28rpx;
	background-color: #f5f5f5;
	.scroll-wrapper {
		flex: 1;
		overflow-y: auto;
		overflow-x: hidden;
		.logo {
			display: block;
			width: 100px;
			height: 100px;
			margin: 50px auto;
		}
		
		.title {
			font-size: 18px;
			color: #8f8f94;
			text-align: center;
		}
		.bg {
			display: block;
			margin: 50px auto;
			width: 100px;
			height: 100px;
			background-image: url('~@/static/images/logo.png');
			background-size: cover;
		}
		
		.box {
		    img {
		        width:300px;
		    }
		    ul {
		        li {
		            float: left;
		            width: 300px;
		            height: 300px;
		            position: relative;
		            perspective: 500px;
					transform-style: preserve-3d;
		            transform: rotateY(5deg);
		            span {
		                list-style: none;
		                position: absolute;
		                width: 300px;
		                height: 300px;
		                display: block;
		                border: 1px solid #000000;
		                transition: all .5s linear;
		                &:nth-child(1) {
		                    transform: rotateY(0deg);
		                    z-index: 2;
		                }
		                &:nth-child(2) {
		                    transform: rotateY(180deg);
		                    z-index: 1;
		                }
		            }
		            &:hover {
		                span {
							&:nth-child(1) {
								transform: rotateY(180deg);
							}
						}
		            }
		            &:hover {
		                span {
							&:nth-child(2) {
								transform: rotateY(360deg);
							}
						}
		            }
		        }
		    }
		}
		
		
		
	}
}